<template>
  <div class="app-container home">


    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="规则名称" prop="ruleTitle">
        <el-input v-model="form.ruleTitle" placeholder="请输入规则名称" />
      </el-form-item>

      <el-form-item label="预警等级" prop="warningLevel">
        <el-radio-group v-model="form.warningLevel">
          <el-radio
            v-for="dict in warningLevelOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
          >{{dict.dictLabel}}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="情感特征" prop="emotion">
        <el-checkbox-group  v-model="form.emotion">
        <el-checkbox
          v-for="dict in emotionalCharacteristicsOptions"
          :key="dict.dictValue"
          :label="dict.dictValue"
        >{{dict.dictLabel}}
        </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="信息载体" prop="mediaType">
        <el-checkbox-group  v-model="form.mediaType">
        <el-checkbox
          v-for="dict in mediaTypeOptions"
          :key="dict.dictValue"
          :label="dict.dictValue"
        >{{dict.dictLabel}}
        </el-checkbox>
        </el-checkbox-group>
      </el-form-item>


      <el-form-item style="width: 100%" label="出现位置" prop="searchArea">
        <el-radio-group v-model="form.searchArea">
          <el-radio v-for="dict in searchAreaOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue">{{dict.dictLabel}}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item style="width: 100%" label="相关词" prop="relatedWords">
        <el-input v-model="form.relatedWords" type="textarea"
                  :rows="5" placeholder="请输入关键词，多个词请用','隔开，支持关键词组合" :maxlength="500" show-word-limit/>
        <div style="display: flex; justify-content: space-between; align-items: center;
                      position: absolute; top: -30px; width: 100%">
          <span style="font-size: 12px">关键词添加支持逻辑规则：“*”（与）、“,”（或）；不支持单个关键字</span>

        </div>
        <el-tooltip class="item"
                    effect="dark" content="为确保匹配的信息与您有关，请输入您所关注的地域词、机构名、人名、职务等，如北京工商局，张三副局
                      长，北京张三，工商局副局长；于防敏感词屏蔽的目的请用字母代替，如“政府”用“zf”代替" placement="top">
          <img src="../../../assets/images/tips9.svg"
               style="position: absolute; left: -90px; top: 10px; width: 16px; height: 16px"/>
        </el-tooltip>
      </el-form-item>


      <el-form-item style="width: 100%" label="排除词" prop="exclusionWords">
        <el-input v-model="form.exclusionWords" type="textarea"
                  :rows="5" placeholder="请输入排除词" :maxlength="500" show-word-limit/>
        <el-tooltip class="item"
                    effect="dark" content="为确保匹配的信息与您有关，请输入您所关注的地域词、机构名、人名、职务等，如北京工商局，张三副局
                      长，北京张三，工商局副局长；于防敏感词屏蔽的目的请用字母代替，如“政府”用“zf”代替" placement="top">
          <img src="../../../assets/images/tips9.svg"
               style="position: absolute; left: -90px; top: 10px; width: 16px; height: 16px"/>
        </el-tooltip>
      </el-form-item>

      <el-form-item label="预警方式" prop="warningNoticeType">
        <el-checkbox-group v-model="form.warningNoticeType">
        <el-checkbox
          v-for="dict in warningNoticeTypeOptions"
          :key="dict.dictValue"
          :label="dict.dictValue"
        >{{dict.dictLabel}}
        </el-checkbox>
        </el-checkbox-group>
      </el-form-item>


      <el-form-item label="接收人" prop="receivers">
        <el-checkbox-group v-model="form.receiverList">
          <el-checkbox
            v-for="dict in receivers"
            :key="dict.id"
            :label="dict.id"
          >{{dict.nickName}}
          </el-checkbox>
        </el-checkbox-group>

      </el-form-item>

      <el-form-item label="开始预警时间" prop="startWarningTime">
        <el-time-select v-model="form.startWarningTime"
                        placeholder="起始时间"
                        :picker-options="{
      start: '00:00',
      step: '00:15',
      end: '24:00'
    }">
        </el-time-select>
      </el-form-item>
      <el-form-item label="结束预警时间" prop="endWarningTime">

        <el-time-select
          v-model="form.endWarningTime"
          placeholder="结束时间"
          :picker-options="{
      start: '00:00',
      step: '00:15',
      end: '24:00',
      minTime: form.endWarningTime
    }">
        </el-time-select>
      </el-form-item>

    </el-form>
    <div slot="footer"  style="text-align: center">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>


  </div>
</template>

<script>
  import { addRule, updateRule} from "@/api/system/rule";
  import Editor from '@/components/Editor';
  import { listReceiver } from "@/api/system/receiver";
  export default {
    name: "Rule",
    components: {
      Editor,
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 表单参数
        form: {
          id:0,
          ruleTitle:'',
          emotion:[],
          mediaType: [],
          searchArea:[],
          receiverList:[],
          warningNoticeType:[],
          relatedWords:null,
          exclusionWords:null,
        },
        // 表单校验
        rules: {
          ruleTitle: [
            { required: true, message: "规则名称不能为空", trigger: "blur" }
          ],
          warningLevel: [
            { required: true, message: "请选择预警等级", trigger: "blur" }
          ],
          emotion: [
            { required: true, message: "请选择情感特征", trigger: "blur" }
          ],
          mediaType: [
            { required: true, message: "请选择信息载体", trigger: "blur" }
          ],
          searchArea: [
            { required: true, message: "请选择查询位置", trigger: "blur" }
          ],
          receiverList: [
            { required: true, message: "请选择预警接收人", trigger: "blur" }
          ],
          warningNoticeType: [
            { required: true, message: "请选择预警方式", trigger: "blur" }
          ],
          relatedWords:[
            { required: true, message: "请填写关键词", trigger: "blur" }
          ],

        },
        warningLevelOptions: [],
        emotionalCharacteristicsOptions: [],
        mediaTypeOptions: [],
        searchAreaOptions: [],
        warningNoticeTypeOptions: [],
        receiverList: [],

        //所有接收人
        receivers:[]
      };
    },
    created() {


      this.form.id=this.$route.query.id

      this.form.ruleTitle=this.$route.query.ruleTitle
      this.warningTypes=this.$route.query.warningTypes
      if (this.warningTypes!=null) {
        this.warningTypes.forEach(item => {
          this.form.warningNoticeType.push(item.warningNoticeType)
        })
      }
      if(this.$route.query.warningLevel!=null) {
        this.form.warningLevel = this.$route.query.warningLevel
      }
      if(this.$route.query.emotion!=null){
        this.form.emotion=this.$route.query.emotion
      }
      if(this.$route.query.mediaType!=null){
        this.form.mediaType=this.$route.query.mediaType
      }
      if(this.$route.query.searchArea!=null){
        this.form.searchArea=this.$route.query.searchArea
      }
      if(this.$route.query.relatedWords!=null){
        this.form.relatedWords=this.$route.query.relatedWords
      }
      if(this.$route.query.exclusionWords!=null){
        this.form.exclusionWords=this.$route.query.exclusionWords
      }
      if(this.$route.query.startWarningTime!=null){
        this.form.startWarningTime=this.$route.query.startWarningTime
      }
      if(this.$route.query.endWarningTime!=null){
        this.form.endWarningTime=this.$route.query.endWarningTime
      }
      if(this.$route.query.warningNoticeContent!=null){
        this.form.warningNoticeContent=this.$route.query.warningNoticeContent
      }
      if(this.$route.query.warningNoticeContent!=null){
        this.form.warningNoticeContent=this.$route.query.warningNoticeContent
      }
      if(this.$route.query.receivers!=null){
        let paramReceivers=this.$route.query.receivers
        paramReceivers.forEach(item=>{
          this.form.receiverList.push(item.receiver)
        })
      }
      this.getDicts("warning_level").then(response => {
        this.warningLevelOptions = response.data;
        if(this.form.id==null){
          this.form.warningLevel=this.warningLevelOptions[0].dictValue
        }
      });
      this.getDicts("emotional_characteristics").then(response => {
        this.emotionalCharacteristicsOptions = response.data;
        if(this.form.id==null){
          this.emotionalCharacteristicsOptions.forEach(item=>{
            if(item.dictValue==='negative'){
              this.form.emotion.push(item.dictValue)
            }
          })
        }
      });
      this.getDicts("media_type").then(response => {
        this.mediaTypeOptions = response.data;
        if(this.form.id==null){
          this.mediaTypeOptions.forEach(item=>{
              this.form.mediaType.push(item.dictValue)
          })
        }
      });
      this.getDicts("search_area_options").then(response => {
        this.searchAreaOptions = response.data;
        if(this.form.id==null){
          this.form.searchArea=this.searchAreaOptions[0].dictValue
        }
      });
      this.getDicts("warning_notice_type").then(response => {
        this.warningNoticeTypeOptions = response.data;
        if(this.form.id==null){
          this.warningNoticeTypeOptions.forEach(item=>{
            if(item.dictValue==='dialog') {
              this.form.warningNoticeType.push(item.dictValue)
            }
          })

        }
      });
      this.getReceivers()

    },
    methods: {
      getReceivers() {
        listReceiver({}).then(response => {
          this.receivers = response.rows;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          ruleTitle: null,
          enabledState: null,
          warningType: null,
          warningLevel: null,
          articleType: null,
          warningNoticeUsername: null,
          warningNoticeContent: null,
          startWarningTime: null,
          endWarningTime: null,
          emotion: [],
          mediaType: []
        };
        this.resetForm("form");
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateRule(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
              });
            } else {
              addRule(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
              });
            }
          }
        });
      },

    }
  };
</script>

<style scoped lang="scss">
  .home {
    background-color: white;
    margin-top: 10px;
    margin-right: 10px;
  }

  .key-tips {
    position: relative;
    font-size: 12px;

    &:hover::before {
      content: '';
      position: absolute;
      z-index: 99999;
      top: -324px;
      right: 0px;
      width: 624px;
      height: 324px;
      background: url('../../../assets/images/tishi.svg');
      background-size: cover;
    }
  }
</style>
